/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 1. We don't want any of the animations that come inherited from the mixin.
 *    These should act like normal links instead.
 * 2. Change the easing, quickness to not bounce so lighter backgrounds don't flash
 */
.ouiButtonEmpty {
  @include ouiButton;

  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
  // sass-lint:disable-block no-important
  transform: none !important; /* 1 */
  animation: none !important; /* 1 */
  transition-timing-function: ease-in; /* 2 */
  transition-duration: $ouiAnimSpeedFast; /* 2 */

  .ouiButtonEmpty__content {
    padding: 0 $ouiSizeS;
  }

  .ouiButtonEmpty__text {
    display: flex;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &.ouiButtonEmpty--small {
    height: $ouiButtonHeightSmall;
  }

  &.ouiButtonEmpty--xSmall {
    height: $ouiButtonHeightXSmall;
    font-size: $ouiFontSizeS;
  }

  &:disabled {
    @include ouiButtonContentDisabled;

    color: $ouiButtonColorDisabledText;

    &:focus {
      background-color: transparent;
    }

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}


.ouiButtonEmpty--flushLeft,
.ouiButtonEmpty--flushRight,
.ouiButtonEmpty--flushBoth {
  .ouiButtonEmpty__content {
    padding-left: 0;
    padding-right: 0;
  }
}

.ouiButtonEmpty--flushLeft {
  margin-right: $ouiSizeS;
}

.ouiButtonEmpty--flushRight {
  margin-left: $ouiSizeS;
}

// Modifier naming and colors.
$ouiButtonEmptyTypes: (
  primary: $ouiColorPrimaryText,
  danger: $ouiColorDangerText,
  disabled: $ouiButtonColorDisabledText,
  ghost: $ouiColorGhost,
  text: $ouiTextColor,
  success: $ouiColorSecondaryText,
  warning: $ouiColorWarningText,
);

// Create button modifiers based upon the map.
@each $name, $color in $ouiButtonEmptyTypes {
  .ouiButtonEmpty--#{$name} {
    @if ($name == 'ghost') {
      // Ghost is unique and ALWAYS sits against a dark background.
      color: $color;
    } @else if ($name == 'text') {
      // The default color is lighter than the normal text color, make the it the text color
      color: $ouiTextColor;
    } @else {
      // Other colors need to check their contrast against the page background color.
      color: makeHighContrastColor($color, $ouiColorEmptyShade);
    }

    &:focus {
      background-color: transparentize($color, .9);
    }

    &:hover {
      @if ($name == 'disabled') {
        cursor: not-allowed;
      }
    }
  }
}



/* OUI -> EUI Aliases */
$euiButtonEmptyTypes: $ouiButtonEmptyTypes;
/* End of Aliases */
